<template>
  <div class="audition173">
     <v-md-preview :text="text1" />
  </div>
</template>

<script>
const prefix = '``` js'
const suffix = '```'
export default {
  name: 'Audition173',
  data() {
    return {
      text1: `${prefix}
      var obj = {
        name: 'dilireba',
        age: 18
      }
      // target表示被代理的对象，即obj
      // key表示操作的属性， value表示更新后的值
      var handler = {
        // 获取时调用 如p.name
        get(target, key) {
          console.log('1: ', target, key)
          return target[key]
        },
        // 修改属性的值时调用 如 p.age = 20
        set(target, key, value) {
          console.log('4: ', target, key, value)
          target[key] = value
        },
        // 检测某个属性是否存在时调用  如 'name' in p
        has(target, key) {
          console.log('6: ', target, key)
        },
        // 遍历时调用 如 Object.keys(p)
        ownKeys(target) {
          console.log('9: ', target)
        },
        // 删除属性时调用  如 delete p.age
        deleteProperty(target, key) {
          console.log('10: ', target, key)
        }
      }
      var p = new Proxy(obj, handler)
      console.log('2: ', p,  Object.prototype.toString.call(p))
      console.log('3: ', p.name)
      p.age = 20
      console.log('5: ', p)
      console.log('7: ', 'name' in p , 'name' in obj)
      // console.log('8: ', Object.keys(p))
      delete p.age
      console.log('11: ', p, obj)
      \n${suffix}`,
    }
  }
}
</script>

<style>

</style>